<template>
  <div class="home-wrap">
    <div class="banner">
      <swiper :options="swiperOptionBanner" ref="SwiperBanner">
        <swiper-slide v-for="(v, index) in bannerList" :key="index">
          <l-image :src="v" height="450"></l-image>
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination"></div>
    </div>
    <div class="gonggao flex al-c">
      <swiper :options="swiperNewOptionBanner" ref="SwiperNews" class="s-wrap">
        <swiper-slide v-for="(v, index) in gongGaoList" :key="index">
          <div class="text-wrap flex al-c">{{v.name | lineClamp(21)}}</div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="home-menu flex">
      <router-link to="" class="item" v-for="v in 8">
        <img :src="`http://iph.href.lu/90x90?text=菜单${v+1}`" alt="">
        <div>菜单{{v + 1}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
/**
 * https://github.com/surmon-china/vue-awesome-swiper
 * */
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import home from '@/mixins/home'

export default {
  name: 'Home',
  mixins: [home],
  data() {
    return {
      bannerList: [
        'http://iph.href.lu/750x450',
        'http://iph.href.lu/750x450',
        'http://iph.href.lu/750x450',
      ],
      gongGaoList: [
        {
          name: '公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容'
        }
      ],
      baseList: [],
      baseName: '加载中',
      baseCode: '',
      swiperOptionBanner: {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
        }
      },
      swiperNewOptionBanner: {
        direction: 'vertical',
        loop: true,
        autoplay: true
      },
      gongGao: []
    }
  },
  computed: {},
  async mounted() {
  },
  components: {
    swiper,
    swiperSlide
  },
  methods: {
  }
}
</script>


<style lang="scss">
@import "../../../../style/var";
@import "../../../../style/mixin";

.home-wrap {
  .banner {
    position: relative;
    height: 450px;


    .swiper-pagination {
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;

      .swiper-pagination-bullet {
        margin: 0 10px;
        background-color: $main-color;
      }
    }

    img {
      width: 100%;
      display: block;
    }
  }
  .gonggao {
    position: relative;
    height: 110px;
    background-color: #fff;
    padding: 0 30px;

    .s-wrap {
      height: 110px;
      flex: 1;
    }

    .img {
      width: 70px;
    }

    .jb {
      position: absolute;
      right: 0;
      top: 0;
      width: 70px;
    }

    .text-wrap {
      height: 100%;
      flex: 1;
      padding-left: 20px;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  }
  .home-menu {
    flex-wrap: wrap;
    background-color: #fff;
    margin: 30px auto;
    padding: 30px 0 0 0;

    .item {
      flex: 0 0 25%;
      color: #333;
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;

      img {
        width: 94px;
        margin: 0 auto 10px;
        display: block;
      }
    }
  }
}
</style>
